<template>
  <header :class="[
    'fixed w-full top-0 z-50 transition-all duration-300',
    scrolled ? 'py-4 bg-white/80 backdrop-blur-lg shadow-[0_8px_30px_rgba(0,0,0,0.12)]' : 'py-6 bg-transparent'
  ]">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex items-center justify-between">
        <Logo />
        <!-- Desktop Navigation -->
        <div class="hidden lg:flex items-center space-x-1">
          <NavLink v-for="link in navLinks" :key="link.title" :title="link.title" :href="link.href" />
        </div>
        <!-- Right section -->
        <div class="flex items-center gap-6">
          <IconButton :icon="ShoppingCart" :count="3" />
          <IconButton :icon="User" class="hidden md:block" />
          <IconButton :icon="isOpen ? X : Menu" class="lg:hidden" @icon-click="toggleMenu" />
        </div>
      </div>
      <!-- mobile Navigation -->
      <div :class="[
        'lg:hidden fixed inset-0 top-[80px] bg-white/80 backdrop-blur-lg transition-all duration-300 ease-in-out',
        isOpen ? 'translate-x-0' : '-translate-x-full'
      ]">
        <nav class="bg-white/90 border-t">
          <div class="flex flex-col p-6 space-y-4">
            <NavLink 
              v-for="link in navLinks" 
              :key="link.title" 
              :title="link.title" 
              :href="link.href" 
              :isMobile="true" 
              @click="closeMenu"
            />
          </div>
        </nav>
      </div>
    </div>
  </header>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import Logo from '../components/Logo.vue'
import IconButton from '../components/IconButton.vue'
import NavLink from '../components/NavLink.vue'
import { Menu, ShoppingCart, User, X } from 'lucide-vue-next'

export default {
  name: 'Header',
  components: {
    Logo,
    IconButton,
    NavLink
  },
  setup() {
    const isOpen = ref(false)
    const scrolled = ref(false)
    
    const navLinks = [
      {title: "Home", href: "#"},
      {title: "Menu", href: "#"},
      {title: "Service", href: "#"},
      {title: "Offers", href: "#"},
      {title: "Rewards", href: "#"}
    ]
    
    const handleScroll = () => {
      scrolled.value = window.scrollY > 20
    }
    
    const toggleMenu = () => {
        console.log("toggleMenu", isOpen.value);
      isOpen.value = !isOpen.value;
      console.log("toggleMenu after", isOpen.value);
    }
    
    const closeMenu = () => {
      isOpen.value = false
    }
    
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })
    
    return {
      isOpen,
      scrolled,
      navLinks,
      toggleMenu,
      closeMenu,
      ShoppingCart,
      User,
      Menu,
      X
    }
  }
}
</script>